<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="130px"
        :model="opinionForm"
        style="padding-right: 30px;"
        :rules="subjectCollectionRules"
        ref="opinionForm"
      >
        <el-row>
          <el-col :span="18" style="margin-top: 27px">
            <el-form-item class="form-item-release" label="课题名称 :" prop="title">
              <el-input
                v-model="opinionForm.title"
                placeholder="请输入课题名称"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item class="form-item-release" label="选题理由 :" prop="reason">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入选题理由"
                v-model="opinionForm.reason"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item class="form-item-release" label="重点研究内容 :" prop="important">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入重点研究内容"
                v-model="opinionForm.important"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="联系人 :" prop="contactName">
              <el-input
                v-model="opinionForm.contactName"
                placeholder="请输入联系人"
                style="width: 280px"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="联系电话 :" prop="contactNumber">
              <el-input
                v-model="opinionForm.contactNumber"
                placeholder="请输入联系电话"
                style="width: 280px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-group-file" style="margin-top:12px;" v-if="toDoOrnot=='0'">
        <span class="form-label-file">相关材料:</span>
        <el-upload
          style="margin-top: 6px;margin-left: 70px;"
          class="upload-demo"
          ref="uploadrelated"
          action="string"
          :http-request="submitUploadMixin"
          :on-preview="handlePreviewMixin"
          :on-remove="handleRemoveMixin"
          :file-list="fileListMixin"
          :auto-upload="true"
          :on-change="fileChangeMixin">
          <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">上传工作方案、工作计划等相关材料</div>
        </el-upload>
      </div>


      <div style="margin-top: 18px;margin-left: 78px;" v-if="toDoOrnot=='1'">
        <p class="" style="float:left;font-weight: 600;margin-bottom: 0px;">附件 ：</p>
        <div v-for="(file,index) in files" :key="index" class="relateddivsubject">
          <el-tooltip class="item" effect="dark" content="下载资料" placement="top-start">
            <el-button class="downbtn" @click="fileDownload(file.fileId,file.fileName)">
              <img src="img/download-blue.png" class="detail-data-img"/><span>下载</span>
            </el-button>
          </el-tooltip>
          <p class="detail-data-file" v-if="file.fileName">{{file.fileName}}</p>
        </div>
        <p class="detail-data-file" v-if="files.length==0">无</p>
      </div>


      <div class="form-submit" v-if="toDoOrnot=='0'">
        <el-button type="primary" @click.stop="updateForm()">提交</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
      <div class="form-submit" style="margin-top: 30px;" v-if="toDoOrnot=='1'&&state=='4'">
        <el-button type="info" @click.stop="rejectFeedback()">退回修改</el-button>
      </div>
      <el-collapse v-model="activeNames" style="margin-top:2rem;">
        <el-collapse-item name="targetLog">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">转办信息</div>
            </div>
          </template>
          <div>
            <target-log-for-current-user :targetId="targetId"></target-log-for-current-user>
          </div>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">课题征集信息</div>
            </div>
          </template>
          <div>
            <!--<bostech-detail :detail-data="opinionDetailData"></bostech-detail>-->
            <opinion-detail :opinionId="$route.params.id"></opinion-detail>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-dialog title="不采纳理由" :visible.sync="dialogVisibleDisagree">
        <el-input
          type="textarea"
          v-model="disagreeOpinion"
          rows="3"
        >
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleDisagree = false">取 消</el-button>
          <el-button type="primary" @click="disagreeComitYes()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="退回理由" :visible.sync="dialogVisibleReject">
        <el-input
          type="textarea"
          v-model="rejectReason"
          rows="3"
        >
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleReject = false">取 消</el-button>
          <el-button type="primary" @click="rejectComitYes()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="规划详情" :visible.sync="detailDialogVisible" width="70%">
        <bostech-detail :detail-data="detailData"></bostech-detail>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.stop="detailDialogVisible == false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import {collectionFormOpinion, getOpinion, formOpinion} from "@/api/opinion";
  import relatedfile from "@/mixins/relatedfile";
  import {getNotNull, getFileTypeFiles} from '@/views/util'
  import fileTypeMixin from "@/mixins/fileTypeMixin";
  import opinionDetail from "@/components/opinion/detail"


  export default {
    name: "subjectOpinionBack",
    mixins: [relatedfile, fileTypeMixin],
    components: {
      opinionDetail
    },
    created() {
      // this.getDetailData_opinion(this.$route.params.id);
      this.toDoOrnot = this.$route.query.toDoOrnot;
      this.state = this.$route.query.state;
      this.title = this.$route.query.title;
      this.typeControlDetail = this.$route.query.typeControlDetail;
      if (this.$route.query.toDoOrnot != undefined && this.$route.query.toDoOrnot == '1') {
        this.putFeedbackForm();
      }
      this.targetId = this.$route.query.targetId;
    },
    data() {
      return {
        targetId: null,
        headerData: {
          title: '课题征集反馈'
        },
        opinionDetailData: [],
        typeControlDetail: '',
        // 当前的表单信息
        detailData: [],
        activeNames: ['1', 'targetLog'],
        toDoOrnot: '0',
        state: '',
        files: [],
        dialogVisibleDisagree: false,//不采纳理由弹框
        disagreeOpinion: '',// 不采纳理由
        dialogVisibleReject: false,// 退回理由弹框
        rejectReason: '',//退回理由
        title: '',//对应类型名称
        btnName: '',
        detailDialogVisible: false,
        assignDeptDetailData: [],
        opinionForm: {
          title: '',
          reason: '',
          important: '',
          contactNumber: '',
          contactName: '',
        },
        hasOpinionFlag: true,
        subjectCollectionRules: {
          title: [
            {required: true, message: "请输入课题名称", trigger: "blur"}
          ],
          reason: [
            {required: true, message: "请输入选题理由", trigger: "blur"}
          ],
          important: [
            {required: true, message: "请输入重点研究内容", trigger: "blur"}
          ],
          contactName: [
            {required: true, message: "请输入联系人", trigger: "blur"}
          ],
          contactNumber: [
            {required: true, message: "请输入联系电话", trigger: "blur"}
          ],
        },
      }
    },
    watch: {},
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      // 更新表单信息
      updateForm() {
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交反馈么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              //将多个相关材料的附件id拼成逗号隔开的字符串放在 this.projectForm.fileId 中
              var arr = [];
              for (var item in this.fileListMixin) {
                arr.push(this.fileListMixin[item].url);
              }
              this.opinionForm.fileIds = arr;
              this.opinionForm.targetId = this.$route.query.targetId;
              collectionFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      //获得征集主题的信息
      getDetailData_opinion(id) {
        getOpinion(id).then(async response => {
          var records = response.data.data;
          let files = await getFileTypeFiles(records.fileIds);
          this.opinionDetailData = [
            {label: '课题征集主题', value: getNotNull(records.title)},
            {label: '发起部门', value: getNotNull(records.deptName)},
            {label: '截止日期', value: getNotNull(records.endDate)},
            {label: '征求说明', value: getNotNull(records.content)},
            {label: '创建时间', value: getNotNull(records.createTime)},
            {label: '创建人', value: getNotNull(records.createNickname)},
            {label: '附件', files: files},
          ]
        })
      },
      //从已办进入，查看当前部门自己反馈的表单
      putFeedbackForm() {
        formOpinion(Object.assign({
          opinionId: this.$route.params.id,
          targetId: this.$route.query.targetId,
        })).then(async response => {
          var records = response.data.data.records[0];
          this.opinionForm.contactName = records.contactName;
          this.opinionForm.contactNumber = records.contactNumber;
          this.opinionForm.title = records.title;
          this.opinionForm.reason = records.reason;
          this.opinionForm.important = records.important;
          if (records.fileIds != null) {
            if (records.fileIds.length != 0) {
              this.files = await getFileTypeFiles(records.fileIds);
            }
          }
        });
      },


      // 采纳
      agreeFeedback() {
        this.$confirm("确定采纳?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          agreeOpinion(this.$route.query.targetId).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: '成功',
                message: '采纳成功',
                type: 'success',
                duration: 2000
              });
              this.$router.go(-1);
            }
          })
        })
      },
      // 不采纳弹框
      disagreeFeedback() {
        this.dialogVisibleDisagree = true
      },
      // 不采纳
      disagreeComitYes() {
        if (!this.disagreeOpinion) {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请填写不采纳理由!",
            duration: 2000
          });
          return
        }
        this.$confirm("确定不采纳?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          disagreeOpinion(Object.assign({
            targetId: this.$route.query.targetId,
            opinion: this.disagreeOpinion,
          })).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: '成功',
                message: '提交成功',
                type: 'success',
                duration: 2000
              });
              this.dialogVisibleDisagree = false;
              this.$router.go(-1);
            }
          })
        })
      },
      // 退回修改弹框
      rejectFeedback() {
        this.dialogVisibleReject = true
      },
      // 退回修改
      rejectComitYes() {
        if (!this.rejectReason) {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请填写退回理由!",
            duration: 2000
          });
          return
        }
        this.$confirm("确定退回?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          rejectOpinion(Object.assign({
            targetId: this.$route.query.targetId,
            opinion: this.rejectReason,
          })).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: '成功',
                message: '提交成功',
                type: 'success',
                duration: 2000
              });
              this.dialogVisibleReject = false;
              this.$router.go(-1);
            }
          })
        })
      },
      getDetail() {

      },
    },
  }
</script>

<style lang="scss" scoped>
  .relateddivsubject {
    margin-top: 0px;
    margin-left: 58px;
    margin-bottom: 0px;
  }

</style>


